<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-04-10 13:44:29
 * @LastEditors: libing 964368540@qq.com
 * @LastEditTime: 2024-06-13 00:06:45
 * @FilePath: \crm\pagesecharts\index\components2\card1.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="card">
    <view class="title u-flex u-flex-between">
      <view class="u-flex">
        <u--image
          :src="$z.imgsrc('jian1.png')"
          width="36rpx"
          height="36rpx"
        ></u--image>
        <view class="text">销售简报</view>
      </view>

      <!-- <u-icon name="arrow-right" size="12" color="#999999"></u-icon> -->
    </view>
    <view class="text1 xsze">销售总金额</view>
    <view class="u-flex u-flex-between color2 xszecontent">
      <view class="u-flex" style="align-items: flex-end">
        <view class="u-font-36">￥</view>
        <view class="u-font-52">273,736.00</view>
      </view>
      <view class="text1">
        订单
        <text class="color2 u-font-40" style="margin: 0 8rpx">536</text>
        笔
      </view>
    </view>
    <view class="list">
      <view
        class="item"
        v-for="(item, index) in list1"
        :key="index"
        style="width: calc(33% - 6rpx)"
      >
        <view class="text1">{{ item.text1 }}</view>
        <view class="text2">{{ item.text2 }}</view>
      </view>
    </view>

    <view class="title2">新增</view>
    <view class="list">
      <view
        class="item"
        v-for="(item, index) in list2"
        :key="index"
        style="width: calc(33% - 6rpx)"
      >
        <view class="text1">{{ item.text1 }}</view>
        <view class="text2">{{ item.text2 }}</view>
      </view>
    </view>
    <view class="title2">当前（所有数据记录）</view>
    <view class="list">
      <view
        class="item"
        v-for="(item, index) in list3"
        :key="index"
        style="width: calc(33% - 6rpx)"
      >
        <view class="text1">{{ item.text1 }}</view>
        <view class="text2">{{ item.text2 }}</view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        list1: [
          {
            text1: "已汇款记录金额",
            text2: "￥3",
          },
          {
            text1: "应收未收",
            text2: "￥3",
          },
          {
            text1: "坏账",
            text2: "￥31251",
          },
        ],
        list2: [
          {
            text1: "订单数",
            text2: "12342",
          },
          {
            text1: "客户数",
            text2: "12342",
          },
          {
            text1: "商机数",
            text2: "12342",
          },
        ],
        list3: [
          {
            text1: "线索数",
            text2: "12342",
          },
          {
            text1: "客户数",
            text2: "12342",
          },
          {
            text1: "商机数",
            text2: "12342",
          },
        ],
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {},
    },
  };
</script>
<style lang="scss" scoped>
  .color1 {
    color: #838589;
  }
  .color2 {
    color: #171a1d;
  }
  // 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
  @for $i from 20 through 60 {
    .u-font-#{$i} {
      font-size: $i + rpx;
    }
  }
  .card {
    margin: 14rpx 18rpx;
    background-color: #fff;
    border-radius: 8rpx;
    padding-bottom: 6rpx;
    // padding: 0 24rpx;
    // padding-bottom: 16rpx;
    .title {
      font-size: 28rpx;
      font-weight: bold;
      height: 88rpx;
      padding: 0 24rpx;
      .text {
        padding-left: 12rpx;
        line-height: 1;
      }
    }
    .title2 {
      height: 48rpx;
      display: flex;
      align-items: center;
      color: #171a1d;
      font-size: 24rpx;
      margin-bottom: 4rpx;
      position: relative;
      padding-left: 40rpx;
      font-weight: bold;
      &::before {
        position: absolute;
        left: 24rpx;
        top: 50%;
        transform: translateY(-50%);
        content: "";
        width: 4rpx;
        height: 16rpx;
        background: #171a1d;
        border-radius: 4rpx;
      }
    }
    .text1 {
      color: #838589;
      font-size: 24rpx;
    }
    .xsze {
      padding: 0 24rpx;
      font-weight: bold;
    }
    .xszecontent {
      padding: 0 24rpx;
      display: flex;
      align-items: flex-end;
      margin-top: 28rpx;
      margin-bottom: 38rpx;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 24rpx;
      .item {
        width: calc(50% - 24rpx);
        background-color: #f4f6fa;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // align-items: center;
        margin-bottom: 18rpx;
        height: calc(56 * 2rpx);
        border-radius: 8rpx;
        padding: 18rpx 0;
        padding-left: 18rpx;

        .text1 {
          color: #838589;
          font-size: 24rpx;
          line-height: 1;
        }
        .text2 {
          color: #171a1d;
          font-size: 28rpx;
          line-height: 1;
          font-weight: bold;
        }
        .text {
          // color: #171a1d;
          // font-size: 24rpx;
          // padding: 8rpx 0;
          // margin-bottom: 24rpx;
        }
      }
    }
  }
</style>
